<template>
    <view>
        <!--#ifdef APP-PLUS-->
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <!--#endif-->
        <!-- #ifndef MP-WEIXIN -->
        <view class="kaoshi-head">
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left"
                      @tap="$navigateBack">
                    <view class="iconfont icon-zuojiantou"></view>
                </view>
                <view class="kaoshi-head-m">我的收藏</view>
            </view>
        </view>
        <!--#endif-->
        <view class="white-background">
            <wuc-tab :tab-list="order_sort" :tabCur="current_index" @change="tabChange"
                     tab-class="text-black bg-white list_top" select-class="text-blue text-xl"></wuc-tab>
        </view>
        <view class="index-content">
            <view class="index-tiku">
                <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
                    <block v-for="(item, index) in list" :key="index">
                        <view class="index-tiku-content"
                              @tap="$openrul('/pages/my/collect/detail?id=' + item.id + '&from_type=' + current_id)">
                            <view class="pub-flex-1">
                                <view class="index-tiku-content-flex">
                                    <view class="index-tiku-content-top">
                                        <view>{{current_id == 1 ? item.unit_name : item.library_name}}</view>
                                        <view class="error_num">收藏{{item.num}}题</view>
                                    </view>
                                </view>
                                <view class="index-tiku-content-flex">
                                    <view class="index-tiku-content-bottom">
                                        <view class="index-tiku-content-bottom-l">
                                            <view>来源:{{current_id == 1 ? item.parent_unit : '历年真题'}}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="iconfont icon-arrow"></view>
                        </view>
                    </block>
                </mescroll-body>
            </view>
        </view>
    </view>
</template>
<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import {mapState} from 'vuex'
    import WucTab from '@/components/wuc-tab/wuc-tab.vue';

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: {
                    use: false, // 是否启用下拉刷新; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                    page: {
                        num:0,
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                // 列表数据
                list:[],

                order_sort: [
                    {name: '章节练习', goods_type: '1'},
                    {name: '历年真题', goods_type: '2'}
                ],
                current_id: '1',
                current_index: 0,
            }
        },
        onShow() {
			this.canReset && this.mescroll.resetUpScroll()
			this.canReset = true
        },
        mounted() {
        },
        computed: {
            ...mapState(['subject'])
        },
        components: {
            WucTab,
        },
        methods: {
            /*上拉加载的回调*/
            async upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let url

                if(this.current_id == 1){
                    //章节练习收藏
                    url=this.$myHttp.urlMap.collect
                }else if(this.current_id == 2){
                    // 历年真题收藏
                    url=this.$myHttp.urlMap.zhenti_collect
                }
                let res = await this.$myHttp.post({
                    url: url,
                    data: {
                        subject_id: this.subject.id,
                        page: pageNum,
                        limit: pageSize
                    },
                    needLogin: true
                })
                if(res.code == 1){
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage = data.xxx;
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.total;

                    this.mescroll.endBySize(curPageLen, totalSize);
                    if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
                    this.list = this.list.concat(curPageData); //追加新数据
                }else{
                    this.mescroll.endErr()
                }
                // 此处仍可以继续写其他接口请求...
                // 调用其他方法...
            },
            tabChange(index) {
                this.current_index = index;
                this.current_id = this.order_sort[index].goods_type;
                this.mescroll.resetUpScroll( false )
            }
        }
    }
</script>
<style>
    page {
        background: #f6f7f9;
    }

    .index-content {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .index-tiku-content {
        width: 92%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding: 14px 0;
        border-bottom: solid 1px #f5f5f5;
    }

    .index-tiku-content-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .index-tiku-content .icon-arrow {
        padding-left: 13px;
        color: #b3b3b3;
    }


    .index-tiku-content .index-tiku-content-flex:first-child {
        padding-bottom: 6px;
    }

    .index-tiku-content .index-tiku-content-flex:last-child {
        font-size: 14px;
        color: #d0d0d0;
    }

    .index-tiku-content-top {
        display: flex;
        align-items: center;
    }

    .index-tiku-content-top img {
        width: 20px;
        height: 22px;
        margin-right: 10px;
    }

    .index-tiku-content-bottom {
        display: flex;
        align-items: center;
    }

    .index-tiku-content-bottom-l {
        display: flex;
        align-items: center;
    }

    .error_num {
        background: #ececec;
        color: #3c7bfc;
        padding: 2px 10px;
        font-size: 12px;
        margin-left: 8px;
        border-radius: 14px 14px 14px 0;
    }
</style>
